<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    :width="700"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
      label-position="right"
      class="noFlex"
    >
      <el-form-item label="参数名称" prop="title">
        <el-input v-model="form.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="参数类型" prop="codeType">
        <el-select
          v-model="form.codeType"
          placeholder="请选择参数类型"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in this.tabList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数格式" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择输入格式"
          clearable
          style="width: 100%"
        >
          <el-option label="文本框" value="1" />
          <el-option label="文本域" value="2" />
          <el-option label="单选框" value="3" />
          <el-option label="多选框" value="4" />
          <el-option label="下拉框单选" value="5" />
          <el-option label="下拉框多选" value="6" />
          <el-option label="switch开关" value="7" />
          <el-option label="图片上传" value="8" />
          <el-option label="文件上传" value="9" />
        </el-select>
      </el-form-item>
      <el-form-item label="参数字段" prop="field">
        <el-input v-model="form.field" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-text type="warning">多个值用逗号间隔开，例如：1,2,3</el-text>
      </el-form-item>
      <el-form-item label="参数值" prop="value">
        <el-input type="textarea" v-model="form.value" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-text type="warning"
          >只有涉及多个option选项值的时候每组数据为一个option，例如男 1，女
          2，未知 3</el-text
        >
      </el-form-item>
      <el-form-item label="参数选项" prop="defValue">
        <el-input type="textarea" v-model="form.defValue" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
export default {
  props: [
    'tabList',
    'tabStatus'
  ],
  emits: ['success', 'closed'],
  data () {
    return {
      mode: "add",
      titleMap: {
        add: '新增'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        title: "",//名称 
        field: "",//字段
        type: '', //格式
        value: '', //默认值
        codeType: this.tabStatus, //参数类型
        defValue: "" // 选项值
      },
      //验证规则
      rules: {
        title: [
          { required: true, message: '请输入参数名称' }
        ],
        field: [
          { required: true, message: '请输入字段名' }
        ],
        codeType: [
          { required: true, message: '请出入参数类型' }
        ],
        type: [
          { required: true, message: '请输入form格式' }
        ]
      },
      file: {
        url: ''
      },
      headers: {}
    }
  },
  mounted () {

  },
  methods: {
    //显示
    open (mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    //表单提交方法
    submit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = await this.$API.operationAuto.addOperation.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success', this.form, this.mode)
            this.visible = false
            this.$emit('selectFromData')
            this.$message.success("操作成功")
          }
        }
      })
    }
  }
}
</script>

<style></style>
